<template>

</template><!--
    /**
     * author: vformAdmin
     * email: vdpadmin@163.com
     * website: https://www.vform666.com
     * date: 2021.08.18
     * remark: 如果要分发VForm源码，需在本文件顶部保留此文件头信息！！
     */
    -->

<template>
    <el-container class="main-container full-height">
        <el-container>
            <el-aside class="side-panel">
                <!-- <widget-panel :designer="designer" /> -->
            </el-aside>

            <el-container class="center-layout-container">
                <el-header class="toolbar-header">
                </el-header>
                <el-main class="form-widget-main">
                    <el-scrollbar class="container-scroll-bar" :style="{ height: scrollerHeight }">
                        <!-- <form-widget :designer="designer" :form-config="designer.formConfig" :global-dsv="globalDsv"
                            ref="formRef">
                        </form-widget> -->
                    </el-scrollbar>
                </el-main>
            </el-container>

            <el-aside>
                <!-- <setting-panel :designer="designer" :selected-widget="designer.selectedWidget"
                    :form-config="designer.formConfig" :global-dsv="globalDsv" @edit-event-handler="testEEH" /> -->
            </el-aside>
        </el-container>

    </el-container>
</template>

<script setup>

</script>

<style lang="scss" scoped>
.el-container.main-container {
    background: #fff;

    :deep(aside) {
        /* 防止aside样式被外部样式覆盖！！ */
        margin: 0;
        padding: 0;
        background: inherit;
    }
}

.el-container.full-height {
    height: 100%;
    overflow-y: hidden;
}

.el-container.center-layout-container {
    min-width: 680px;
    border-left: 2px dotted #EBEEF5;
    border-right: 2px dotted #EBEEF5;
}

.el-header.main-header {
    border-bottom: 2px dotted #EBEEF5;
    height: 48px !important;
    line-height: 48px !important;
    min-width: 800px;
}

div.main-title {
    font-size: 18px;
    color: #242424;
    display: flex;
    align-items: center;
    justify-items: center;

    img {
        cursor: pointer;
        width: 36px;
        height: 36px;
    }

    span.bold {
        font-size: 20px;
        font-weight: bold;
        margin: 0 6px 0 6px;
    }

    span.version-span {
        font-size: 14px;
        color: #101F1C;
        margin-left: 6px;
    }
}

.float-left {
    float: left;
}

.float-right {
    float: right;
}

.el-dropdown-link {
    margin-right: 12px;
    cursor: pointer;
    margin-top: 15px;
}

div.external-link {
    display: flex;
    align-items: center;

    a {
        font-size: 13px;
        text-decoration: none;
        margin-right: 10px;
        color: #606266;
    }
}

.el-header.toolbar-header {
    font-size: 14px;
    border-bottom: 1px dotted #CCCCCC;
    height: 85px !important;
    //line-height: 42px !important;
}

.el-aside.side-panel {
    width: 260px !important;
    overflow-y: hidden;
}

.el-main.form-widget-main {
    padding: 0;

    position: relative;
    overflow-x: hidden;
}

.container-scroll-bar {

    :deep(.el-scrollbar__wrap),
    :deep(.el-scrollbar__view) {
        overflow-x: hidden;
    }
}
</style>